.recommendation-card {
  padding: 1rem;
  margin-bottom: 1rem;
  background: var(--background);
  border: 1px solid #383838;
  border-radius: var(--border-radius-md);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.6);
  cursor: pointer;

  &:hover,
  &:focus {
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.8);
    transition: box-shadow 0.2s;
  }
}

.recommendation-card-title-wrapper {
  display: flex;
  align-items: center;
  column-gap: 8px;

  .recommendation-card-icon {
    display: flex;
    align-items: center;

    & svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      color: var(--requestly-color-text-default);
    }
  }

  & .recommendation-card-title {
    font-size: var(--requestly-font-size-sm, 13px);
    font-weight: 500;
    line-height: 18px;
    color: var(--requestly-color-text-default);
  }
}

.recommendation-card-subtitle {
  font-size: var(--requestly-font-size-sm, 12px);
  line-height: 16px;
  font-weight: 500;
  color: var(--neutrals-gray-300);
  margin-top: 8px;
}
